<template>
  <view class="information">
    <view class="optionList" v-if="progress != 3">
      <view class="optionItem">
        <text class="optionTitle">小程序logo</text>
        <view class="addPic" @click="addPic" v-if="!form.app_logo">
          <text class="iconfont icon-camera"></text>
          <text>上传图片</text>
        </view>
        <view class="addPic" @click="addPic" v-else>
          <image :src="form.app_logo"></image>
        </view>
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序名称</text>
        <input
          type="text"
          placeholder="请输入小程序名称"
          v-model="form.app_name"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序英文名称</text>
        <input
          type="text"
          placeholder="请输入小程序英文名称"
          v-model="form.app_english_name"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">客服电话</text>
        <input
          type="text"
          placeholder="请输入小程序客服电话"
          v-model="form.service_phone"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">客服邮箱</text>
        <input
          type="text"
          placeholder="请输入小程序客服邮箱"
          v-model="form.service_email"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序简介</text>
        <input
          type="text"
          placeholder="请输入小程序功能描述"
          v-model="form.app_slogan"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序应用描述</text>
        <input
          type="text"
          placeholder="请输入小程序应用描述"
          v-model="form.app_desc"
          :disabled="status > 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">小程序特殊资质证书</text>
        <view class="picList">
          <view
            class="picItem"
            v-for="(item, index) in form.other_data"
            :key="index"
          >
            <view class="close" @click="delPic(index)">
              <text class="iconfont icon-close"></text>
            </view>
            <image :src="item"></image>
          </view>
          <view
            class="picItem"
            @click="chooseImage"
            v-if="form.other_data.length < 6"
          >
            <text class="iconfont icon-camera"></text>
            <text>{{ $t("order.addPic") }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      <u-button
        @click="submitBtn"
        :custom-style="{ width: '600rpx', height: '80rpx' }"
        type="error"
        shape="circle"
        :disabled="
          (progress == 2 && status == 1) || (progress == 3 && status == 3)
        "
        >{{ btnText }}</u-button
      >
    </view>
  </view>
</template>

<script>
import myPicker from "./myPicker.vue";
import http from "@/common/http.js";
export default {
  components: {
    myPicker
  },
  props: {
    bind_store_id: {
      type: [String, Number],
      default: ""
    },
    mini_id: {
      type: [String, Number],
      default: ""
    },
    status: {
      type: [String, Number],
      default: ""
    },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    allCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    progress: {
      type: [String, Number],
      default: () => {
        return [];
      }
    },
    allCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    allOldCat: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      // 表单信息
      form: {
        app_logo: "",
        app_name: "",
        app_english_name: "",
        mini_categoryIds: [],
        service_phone: "",
        service_email: "",
        app_slogan: "",
        app_desc: "",
        other_data: []
      },
      // 显示分类的选择列表
      showCats: false
    };
  },
  computed: {
    btnText() {
      if (this.progress == 1) {
        if (this.status == 0) {
          return "完善信息";
        }
      }
      if (this.progress == 2) {
        if (this.status == 0) {
          return "提交审核";
        }
        if (this.status == 1) {
          return "审核中";
        }
        if (this.status == 2) {
          return "立即发布";
        }
        if (this.status == 3) {
          return "更新模板";
        }
      }
      if (this.progress == 3) {
        if (this.status == 5) {
          return "待商户确认";
        }
        if (this.status == 3) {
          return "审核中";
        }

        return "开始签约";
      }
    }
  },
  methods: {
    delPic(index) {
      this.form.other_data.splice(index, 1);
    },
    chooseImage() {
      this.$utils.uploadImage(1, (res) => {
        this.form.other_data.push(res);
      });
    },

    addPic() {
      if (this.progress != 1 && this.status != 0) {
        return;
      }

      this.$utils.uploadImage(1, (res) => {
        this.form.app_logo = res;
      });
    },

    // 点击提交审核按钮
    submitBtn() {
      if (this.progress == 1) {
        if (this.status == 0) {
          this.submit();
        }
      }
      if (this.progress == 2) {
        if (this.status == 0) {
          this.submit(1);
        }
        if (this.status == 2) {
          this.releaseApp();
        }
        if (this.status == 3) {
          this.updateTem();
        }
      }
      if (this.progress == 3) {
        if (this.status <= 1) {
          this.OpenAgentCreate();
        }
      }
    },
   
    // 点击添加分类
    changeCat(e) {
      this.form.mini_categoryIds.push(e);
    },
    // 点击删除分类
    delCat(index) {
      if (this.status > 1) {
        return;
      }
      const that = this;
      uni.showModal({
        title: "提示",
        content: "确认删除该分类?",
        async success(res) {
          if (res.confirm) {
            that.form.mini_categoryIds.splice(index, 1);
          } else if (res.cancel) {
          }
        }
      });
    },
    // 点击提交审核
    async submit(is_submit = 0) {
      if (!this.form.app_logo) {
        uni.showToast({
          title: "请上传小程序logo",
          icon: "none"
        });
        return;
      }
      if (!this.form.app_name) {
        uni.showToast({
          title: "请填写小程序名称",
          icon: "none"
        });
        return;
      }
      if (!this.form.app_english_name) {
        uni.showToast({
          title: "请填写小程序英文名称",
          icon: "none"
        });
        return;
      }
      if (!this.form.service_phone) {
        uni.showToast({
          title: "请填写客服电话",
          icon: "none"
        });
        return;
      }
      if (!this.form.service_email) {
        uni.showToast({
          title: "请填写客服邮箱",
          icon: "none"
        });
        return;
      }
      if (!this.form.app_slogan) {
        uni.showToast({
          title: "请填写小程序简介",
          icon: "none"
        });
        return;
      }
      if (!this.form.app_desc) {
        uni.showToast({
          title: "请填写小程序应用描述",
          icon: "none"
        });
        return;
      }
      let param = {
        bind_store_id: this.bind_store_id,
        mini_info: this.form,
        mini_id: this.mini_id
      };
      let result = {};
      uni.showLoading({
        title: this.$t("home.loading")
      });
      if (is_submit !== 1) {
        result = await this.$allrequest.newStore.SetMiniBaseInfo(param);
      } else {
        result = await this.$allrequest.newStore.SubmitVersionAudit(param);
      }

      uni.hideLoading();
      uni.showToast({
        title: result.msg,
        icon: "none",
        duration: 1500
      });
      if (result.code == 0) {
        this.$emit("submit");
      }
    },
    // 更新模板
    async updateTem() {
      uni.showLoading({
        title: this.$t("home.loading")
      });

      const res = await this.$allrequest.newStore.MiniUpVersion({
        bind_store_id: this.bind_store_id,
        mini_id: this.mini_id
      });
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        uni.showToast({
          title: res.msg,
          icon: "none",
          duration: 1500
        });
        this.$emit("submit");
      }
    },
    // 发布小程序
    async releaseApp() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.UpMiniVersion({
        bind_store_id: this.bind_store_id,
        mini_id: this.mini_id
      });
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    async OpenAgentCreate() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.OpenAgentCreate({
        bind_store_id: this.bind_store_id,
        mini_id: this.mini_id
      });
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 显示添加分类
    showCat() {
      if (this.status > 1) {
        return;
      }
      this.showCats = true;
    }
  },
  created() {
    this.form = this.info;
    if (!this.form.mini_categoryIds) {
      this.form.mini_categoryIds = [];
    }
    let status = this.status;
    let progress = this.progress;
    if (
      (progress == 2 && status == 1) ||
      (progress == 3 && status == 3) ||
      (progress == 3 && status == 5)
    ) {
      this.$emit("showTitle", 1);
    }
    if ((progress == 2 && status == 3) || (progress == 3 && status == 6)) {
      this.$emit("showTitle", 2);
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  .optionList {
    padding-left: 24rpx;
    background-color: #fff;
    .optionItem {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      padding-right: 30rpx;
      .optionTitle {
        margin-bottom: 24rpx;
      }
      .optionChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      .chooseType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        height: 80rpx;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      input {
        width: 100%;
      }
      .tip {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 24rpx;
        display: flex;
        flex-direction: column;
      }
      .sceneList {
        display: flex;
        flex-wrap: wrap;
        text {
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          background-color: #f2f2f2;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          font-weight: 600;
        }
        .current {
          border: 1px solid #f60313;
          background-color: #fbeceb;
          color: #f0250e;
        }
      }
      .addPic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 56rpx;
          margin-bottom: 12rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .optionItem:last-child {
      border-bottom: none;
    }
  }
  .picList {
    display: flex;
    flex-wrap: wrap;
    .picItem {
      margin-top: 20rpx;
      position: relative;
      background-color: #f6f6f6;
      height: 210rpx;
      width: 210rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #8c8c8c;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
      .iconfont {
        font-size: 80rpx;
        color: #262626;
      }
      .close {
        z-index: 100;
        position: absolute;
        width: 45rpx;
        height: 45rpx;
        right: 0;
        top: 0;
        border-radius: 0 16rpx 0 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #acacac;
        .iconfont {
          font-size: 28rpx;
          color: #fff;
        }
      }
    }
    .picItem:nth-child(3n) {
      margin-right: 0;
    }
  }
  .footer {
    display: flex;
    padding-top: 10rpx;
    justify-content: center;
    border-top: 1px solid #f8f8f8;
    padding-bottom: 10rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    .btn {
      width: 80%;
      height: 80rpx;
      border-radius: 999px;
      background-color: #f0250e;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
